<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加消息模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../../style/index.css">
</head>
<style>
    .margin-top {
        display: flex;
        /* flex-direction: column; */
        border: 1px solid #eee;
        padding: 20px;
    }
    .moban{
        width: 100%;
    }
    .select{
        width: 100%;
    }
    .item {
        display: flex;
    }
    .left{
        width: 30%;
        border: 1px solid #eeeeee;
        text-align: center;
    }
    .right{
        width: 70%;
    }
</style>

<body>
    <div id="app" class="minWidth">
        <el-form class="margin-top" form="additionalForm" label-width="auto">
            <el-descriptions :column="2" border size="small">
                <el-descriptions-item label="发送消息模板:">
                    <el-form-item prop="selectOne">
                        <el-select v-model="form.selectOne" placeholder="请选择发送消息模板" style="width: 450px;"
                            @change="handleTemplateChange">
                            <el-option v-for="(item, index) in template" :key="index" :label="item.title"
                                :value="item.title">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="选择接口:">
                    <el-form-item prop="selectTwo">
                        <el-select v-model="form.selectTwo" placeholder="请选择接口" style="width: 450px;"
                            @change="handleInterfaceChange">
                            <el-option v-for="(item, index) in selectOptionsTwo" :key="index"
                                :label="item.interface_Name" :value="item.interface_Name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="选择接收角色:">
                    <el-form-item prop="role">
                        <el-select multiple v-model="form.role" placeholder="请选择接口(可多选)" style="width: 450px;"
                            @change="handleInterfaceChange">
                            <el-option v-for="(item, index) in selectOptionsTwo" :key="index"
                                :label="item.interface_Name" :value="item.interface_Name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="选择接收人员:">
                    <el-form-item prop="personnel">
                        <el-select v-model="form.personnel" placeholder="请选择接口" style="width: 450px;"
                            @change="handleInterfaceChange">
                            <el-option v-for="(item, index) in selectOptionsTwo" :key="index"
                                :label="item.interface_Name" :value="item.interface_Name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm('contract')" :disabled="disabled">提交</el-button>
              </el-form-item>
        </el-form>
        <div class="moban" v-if="templateData.length > 0">
            <div v-for="(item, index) in templateData" :key="index" class="item">
                <div class="left">{{ item.label }}</div>
                <div class="right">
                    <el-select class="select" v-model="item.selectedOption" placeholder="请选择">
                        <el-option v-for="(option, idx) in currentInterfaceOptions" :key="idx" :label="option"
                            :value="option">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../../utils/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="./js/Add.js"></script>
    <script type="text/javascript">

    </script>
</body>

</html>